<template>
	<view class="cardItemContainers">
		<view class="cardItem">
			<view class="cardItem_top">
				<view class="cardItem_top_left">
					<u-checkbox-group v-if="extroProjectDialogShow" @change="getcheck(extroObj)">
						<u-checkbox class="cardItem_box" size="28rpx" iconSize="24rpx" :checked='extroObj.checked'
							:disabled="selectable(extroObj)?false:true"></u-checkbox>
					</u-checkbox-group>
					<view class="cardItem_infos" style="margin-top:0rpx;">

						<view class="cardItem_content">
							<view class="cardItem_content_name">
								{{extroObj.createTime}}
							</view>
							<view class="cardItem_content_line" v-if="extroObj.applyDoctorName">

							</view>
							<view class="cardItem_content_name" v-if="extroObj.applyDoctorName">
								{{extroObj.applyDoctorName}}
							</view>

						</view>
					</view>
				</view>

				<view class="cardItem_top_right">
					<view class="cardItem_top_right_btn" v-if="extroObj.statusName == '已上传'"
						:style='this.enterRetaultStatusType(Number(3))'>
						{{extroObj.statusName}}
					</view>
					<view class="cardItem_top_right_btn" v-else :style='this.enterRetaultStatusType(Number(1))'>
						{{extroObj.statusName}}
					</view>
					<view class="cardItem_top_right_btn" :style='this.colorordersStatusType(extroObj.payStatus)'>
						{{extroObj.payStatus}}
					</view>
				</view>
			</view>
			
			<view class="cardItem_infos">
				<view class="cardItem_label">
					项目信息
				</view>
				<view class="cardItem_content">
					<view class="cardItem_content_name color1">
						{{extroObj.doctorAdviceName}}
					</view>
					<view class="cardItem_content_line">

					</view>
					<view class="cardItem_content_name color1">
						{{extroObj.typeName}}
					</view>
					<view class="cardItem_content_line">

					</view>
					<view class="cardItem_content_price">
						￥{{extroObj.doctorAdviceCost}}
					</view>

				</view>
			</view>
			<view class="cardItem_infos" v-if="extroObj.executeInstitutionName">
				<view class="cardItem_label">
					执行机构
				</view>
				<view class="cardItem_content">
					<view class="cardItem_content_name color1">
						{{extroObj.executeInstitutionName}}
					</view>
				</view>
			</view>
			<view class="cardItem_infos" v-if="extroObj.payDateTime">
				<view class="cardItem_label">
					支付时间
				</view>
				<view class="cardItem_content">
					<view class="cardItem_content_name">
						{{extroObj.payDateTime}}
					</view>

				</view>
			</view>
			<view class="cardItem_infos" v-if="extroObj.resultEntryTime">
				<view class="cardItem_label">
					录入信息
				</view>
				<view class="cardItem_content">
					<view class="cardItem_content_name">
						{{extroObj.resultEntryTime}}
					</view>
					<view class="cardItem_content_line">

					</view>
					<view class="cardItem_content_name">
						{{extroObj.resultEntryUserName}}
					</view>

				</view>
			</view>
			<view class="cardItem_inputContainers">
						<view class="cardItem_label">
							结果值
						</view>
						<view class="cardItem_inputContainers_input">
							<u--input placeholder="输入结果" border="surround" v-model="extroObj.result"></u--input>
						</view>
						<view class="cardItem_inputContainers_btn" v-if="(extroObj.payStatus === '机构做' && isSendDoctor) ||
			(extroObj.payStatus === '已付款' && !isSendDoctor)" @tap="saveRemark">
							保存
						</view>
						<view class="cardItem_operation" style="margin-top:0rpx;">
							<view class="cardItem_operation_item"
								v-if="extroObj.payStatus === '待付款' && !isSendDoctor && !addExtroTable">
								<view class="cardItem_operation_item_btn active" @tap="removeItem(extroObj)">
									删除
								</view>
							</view>
							<view class="cardItem_operation_item"
								v-if="extroObj.statusName === '已上传' && (extroObj.resultUrl || (extroObj.pdfUrl && extroObj.pdfUrl != '[]'))">
								<view class="cardItem_operation_item_btn" @tap="itemCheck(extroObj)">
									查看
								</view>
							</view>
							<view class="cardItem_operation_item" v-if="(extroObj.payStatus === '机构做' && isSendDoctor) ||
						(extroObj.payStatus === '已付款' && !isSendDoctor)
						">
								<view class="cardItem_operation_item_btn" @tap="itemCheck(extroObj)">
									{{ extroObj.statusName==='已上传' && (extroObj.resultUrl || (extroObj.pdfUrl && extroObj.pdfUrl != '[]')) ? '重新上传' : '上传'
											                            }}
								</view>
							</view>
						</view>
					</view>
			
		</view>
		<!-- 上传组件 -->
		<extroUpload :extroUploadInfos="extroUploadInfos" v-if="extroUploadStatus"
			@closeedextroUploadStatus="closeedextroUploadStatus" @comfire="commitAppPic"></extroUpload>
	</view>


</template>

<script>
	import request from '@/utils/request'
	import {
		serviceStatusMap,
		ningboOrderTypeMap,
		ordersStatusMap
	} from '@/utils/baseData.js'
	import {
		mapState
	} from 'vuex'
	import extroUpload from '@/components/common/extroUpload.vue'
	export default {
		name: "extroAddItem",
		components: {
			extroUpload
		},
		props: ['extroObj', 'orderObj', 'addExtroTable', 'index'], //entranceType  1:专家介绍进入 2:特需会诊进入
		data() {
			return {
				userId: this.$store.state.user.userInfo.id,
				extroUploadStatus: false,
				extroUploadInfos: {},
				enterRetaultStatusArray: {
					1: '未上传',
					2: '部分上传',
					3: '已上传',
				},
				serviceStatusMap: serviceStatusMap,
				ningboOrderTypeMap: ningboOrderTypeMap,
				ordersStatusMap: ordersStatusMap,
				result: '',
				extroProjectDialogShow: false
			}
		},
		computed: {
			...mapState({
				user: state => state.user.userInfo,
				institutionId: state => state.user.institution.id,
				logInType: state => state.user.logInType, //用户身份 1医生  2个人  普通
			}),
			isSendDoctor() {
				return this.userId === this.orderObj.userId ? true : false
			},
		},
		created() {

		},
		mounted() {
			this.getCheckedStatus()
		},
		methods: {
			getcheck(item, index) {
				console.log('iem', item)
				if (item.checked) {
					item.checked = false
				} else {
					item.checked = true
				}
				let data = {
					index: index,
					...item
				}
				this.$emit('selectArrEvent', data)

			},
			getCheckedStatus() {
				console.log(this.orderObj.ordersStatus)
				if (this.isSendDoctor && (this.orderObj.ordersStatus === 3 || this.orderObj.ordersStatus === 4)) {
					this.extroProjectDialogShow = true

				}
			},
			removeItem(item) {
				if (this.orderObj.orderType === 2 && this.logInType == 2 && this.orderObj.allowedUpdateExtraProjects ===
					0) {
					uni.showModal({
						title: '提示',
						content: `个人不允许删除项目!`,
						success: function(res) {
							if (res.confirm) {

								// 用户点击了确定按钮的相关逻辑可以放在这里
							} else if (res.cancel) {
								console.log('用户点击取消');
								// 用户点击了取消按钮的相关逻辑可以放在这里
							}
						}
					});

					return

				}
				const msg = '确认是否要移除此加做项目'
				let that = this
				uni.showModal({
					title: '删除提示',
					content: msg,
					success: function(res) {
						if (res.confirm) {
							try {
								request({
									method: 'DELETE',
									url: `/diagnosis/extra-project/${item.id}`
								}).then(
									res => {
										if (res.code === 200) {
											that.$u.toast('删除成功')
											that.$emit("refresh")
											//   this[key] = this[key].filter(n => n.id != item.ids)
										}
									},
									err => {
										this.$u.toast(err.response.data)
									}
								)
							} catch (e) {
								console.log('请求失败')
							}
							// 用户点击了确定按钮的相关逻辑可以放在这里
						} else if (res.cancel) {
							that.$u.toast('取消操作')
						}
					}
				});

			},
			commitAppPic(data) {
				// url修正为服务器返回链接
				let _this = this
				try {
					request({
						method: 'put',
						url: '/diagnosis/extra-project',
						data: {
							id: data.TransferData,
							resultUrl: data.imgURL,
							pdfUrl: data.pdfSrcList.length > 0 ? JSON.stringify(data.pdfSrcList) : null
						}
					}).then(
						res => {
							if (res.code === 200) {
								this.$emit("refresh")
								this.extroUploadStatus = false
								//获取加做项目列表

							}
						},
						err => {

						}
					)
				} catch (e) {
					console.log('请求失败')
				}
			},
			itemCheck(item) {
				console.log(item)
				this.extroUploadInfos = item
				this.extroUploadStatus = true
			},
			closeedextroUploadStatus() {
				this.extroUploadStatus = false
			},
			details(item) { //详情
				uni.navigateTo({
					url: `/subPackages/patient/detail/detail?id=${item.id}`
				})
			},
			selectable(row) {
				return row.payStatus === '待付款'
			},
			saveRemark() {
				this.$emit('saveRemark', this.extroObj)
			},
			colorordersStatusType(item) {
				switch (item) {
					case "已付款":
						return {
							'background-color': "#67c23a",
							'border-color': "#67c23a",
							"color": "#fff",
						} //success
					case '近期已做':
						return {
							'background-color': "#909399",
							'border-color': "#909399",
							"color": "#fff",
						} //danger
					case '机构做':
						return {
							'background-color': "#266eff",
							'border-color': "#266eff",
							"color": "#fff",
						} //success
					default:
						return {
							'background-color': "#f56c6c",
							'border-color': "#f56c6c",
							"color": "#fff",
						} //success
				}
			},
			enterRetaultStatusType(item) {
				switch (item) {
					case 3:
						return {
							'background-color': '#f0f9eb', 'border-color': '#e1f3d8', color: '#67c23a'
						} //success
					case 2:
						return {
							'background-color': '#fdf6ec', 'border-color': '#faecd8', color: '#e6a23c'
						} //danger
					case 1:
						return {
							'background-color': '#fef0f0', 'border-color': '#fde2e2', color: '#f56c6c'
						} //success
					default:
						return {
							'background-color': '#fef0f0', 'border-color': '#fde2e2', color: '#f56c6c'
						} //success
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.color1 {
		color: #000;
		font-weight: 700;
	}

	.cardItemContainers {
		padding:16rpx 0rpx;
	}

	.cardItem {
		padding: 16rpx;
		box-shadow: 2rpx 2rpx 8rpx 8rpx rgba(32, 108, 228, 0.3);
		border-radius: 8rpx;

		&_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 8rpx;
			border-bottom: 2rpx solid #ddd;

			&_left {
				display: flex;
				align-items: center;
			}

			&_right {
				display: flex;
				align-items: center;

				&_btn {
					padding: 0 6rpx;
					border-radius: 6rpx;
					margin-right: 8rpx;
					font-size: 26rpx;
					line-height: 40rpx;
					transform: scale(0.9);
					border: 2rpx solid #fff;
				}

				&_btn:last-child {
					margin: 0rpx;
				}

			}

		}

		&_infos {
			margin-top:8rpx;
			font-size: 26rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;

		}

		&_content {
			color: #111111;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			&_name {}

			&_price {
				color: red;
			}

			&_line {
				width: 2rpx;
				height: 20rpx;
				background: rgba(168, 168, 168, 1);
				margin: 0 10rpx;
			}
		}

		&_label {
			width: 140rpx;
			color: #666666;
			font-size: 26rpx;
			line-height: 40rpx;
		}

		&_inputContainers {
			margin-top:8rpx;
			display: flex;
			align-items: center;
			// justify-content: space-between;

			&_input {
				// width: calc(100% - 230rpx);
				width: 180rpx;
			}

			&_btn {
				cursor: pointer;
				padding: 2rpx 16rpx;
				height: 44rpx;
				font-size: 26rpx;
				line-height: 40rpx;
				border-radius: 6rpx;
				color: #266EFF;
			}
		}

		&_operation {
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			&_item {
				padding: 10rpx;

				&_btn {
					cursor: pointer;
					padding: 2rpx 16rpx;
					height: 48rpx;
					font-size: 26rpx;
					line-height: 42rpx;
					border: 2rpx solid #266EFF;
					border-radius: 6rpx;
					color: #266EFF;
				}

				&_btn.active {
					border: 2rpx solid red;
					color: red;
				}
			}
		}
	}
</style>